<%@ page contentType="text/html;charset=UTF-8" %>


<div class="bjui-pageHeader">

</div>
<body>

<div class="bjui-pageContent tableContent" id="div1">
    <table>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div style="height: 50px;text-align: center;font-size:30px;color: #101010 ">良率</div>
        <div style="height: 50px;text-align: center;font-size:25px;color: #101010 "><label id="show1"></label></div>

        <div id="yieldcompare" style="width:33%;height:80%;float: left" ></div>
        <div id="defectoneline" style="width:33%;height:80%;float: left" ></div>
        <div id="defecttwoline" style="width:33%;height:80%;float: left" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            <g:each in="${yieldcomparerpt}" status="i" var="tableInstance">
            data.push('${tableInstance.TIME}');
            </g:each>


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '',
                    textStyle:{fontSize:25}
                },
                tooltip: {

                },
                legend: {
                    data:['东线实际','西线实际','目标'],
                    y:'bottom',
                    textStyle:{fontSize:20}
                },
                xAxis: {
                    data:[''],
                    "axisLabel":{
                        "interval":0,
                        "rotate":'',
                        textStyle:{fontSize:15}
                    },
                },
                yAxis : [
                    {
                        type : 'value',
                        name:'',
                        max:100,
                        min:90,
                        axisLabel : {
                            formatter: '{value}',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    }/*,
                    {
                        type : 'value',
                        axisLabel: {
                            formatter: '{value} %',
                            textStyle:{fontSize:25}

                        }
                    }*/
                ],
                series : [

                    {
                        name: '东线实际',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color:'#FF0000',
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}',//百分比显示
                                    textStyle:{fontSize:25}
                                }
                            }
                        },
                        data:${yieldcomparerpt.ACTUAL}
                    },
                    {
                        name: '西线实际',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color:'#00EC00',
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}',//百分比显示
                                    textStyle:{fontSize:25}
                                }
                            }
                        },
                        data:${yieldcomparerptx.ACTUAL}
                    },
                    {
                        name: '目标',
                        type: 'line',
                        /*itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}%',//百分比显示
                                    textStyle:{fontSize:20}
                                }
                            }
                        },*/
                        markLine : {
                            itemStyle: {
                             normal: {
                             label: {
                             show: true,
                             textStyle:{fontSize:25}
                             }
                             }
                             },
                            data : [
                                {type : 'average', name: '目标值'}
                            ],


                        },
                        data:${yieldcomparerpt.TARGET}
                    }


                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("macarons", document.getElementById('yieldcompare'), option);
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            <g:each in="${defectoneline}" status="i" var="tableInstance">
            data.push('${tableInstance.DEFECT_DESC}');
            </g:each>


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '',
                    textStyle:{fontSize:25}
                },
                tooltip: {

                },
                legend: {
                    data:['产出','良率'],
                    textStyle:{fontSize:25}
                },
                xAxis: {
                    data:data,
                    "axisLabel":{
                        "interval":0,
                        "rotate":30,
                        textStyle:{fontSize:10}
                    },
                },
                yAxis : [
                    {
                        type : 'value',
                        name:'',
                        axisLabel : {
                            formatter: '{value}',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    },
            {
                        type : 'value',
                        axisLabel: {
                            formatter: '{value} %',
                            textStyle:{fontSize:13}

                        }
                    }
                ],
                series : [

                    {
                        name: '产出',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color:'#FFD306',
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}',//百分比显示
                                    textStyle:{fontSize:25}
                                }
                            }
                        },
                        data:${defectoneline.DEFECT_QTY}
                    },
                    {
                        name: '良率',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color:'#000000',
                                /*label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}%',//百分比显示
                                    textStyle:{fontSize:20}
                                }*/
                            }
                        },
                        data:${defectoneline.DEFECT_YIELD},
                        yAxisIndex: 1
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("macarons", document.getElementById('defectoneline'), option);
        </script>

    </table>


    <div>
        <table>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var contextPath = "${request.getContextPath()}";
                eChartsTool.init(contextPath);
                var data=[];
                <g:each in="${defecttwoline}" status="i" var="tableInstance">
                data.push('${tableInstance.DEFECT_DESC}');
                </g:each>


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '',
                        textStyle:{fontSize:25}
                    },
                    tooltip: {

                    },
                    legend: {
                        data:['产出','良率'],
                        textStyle:{fontSize:25}
                    },
                    xAxis: {
                        data:data,
                        "axisLabel":{
                            "interval":0,
                            "rotate":30,
                            textStyle:{fontSize:10}
                        },
                    },
                    yAxis : [
                        {
                            type : 'value',
                            name:'',
                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{fontSize:25}
                            },
                            show:true
                        },
                        {
                            type : 'value',
                            axisLabel: {
                                formatter: '{value} %',
                                textStyle:{fontSize:25}

                            }
                        }
                    ],
                    series : [

                        {
                            name: '产出',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color:'#FFD306',
                                    label: {
                                        show: true,
                                        position: 'inside',//数据在中间显示
                                        formatter:'{c}',//百分比显示
                                        textStyle:{fontSize:25}
                                    }
                                }
                            },
                            data:${defecttwoline.DEFECT_QTY}
                        },
                        {
                            name: '良率',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color:'#000000',
                                    /*label: {
                                        show: true,
                                        position: 'inside',//数据在中间显示
                                        formatter:'{c}%',//百分比显示
                                        textStyle:{fontSize:20}
                                    }*/
                                }
                            },
                            data:${defecttwoline.DEFECT_YIELD},
                            yAxisIndex: 1
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                eChartsTool.setOption("macarons", document.getElementById('defecttwoline'), option);
            </script>
            <script>
                $(function(){

                    var time=new Date();
                    var date =time.formatDate("HH:mm");
                    var date1=time.formatDate("yyyy年MM月dd日");
                    $("#show1").html("日期："+date1+"                 时间："+date)
                });

            </script>
       </table>
</div>
</div>
</body>
<div class="bjui-pageFooter">
    <form id="pagerForm1" data-toggle="ajaxsearch" action="${request.getContextPath()}/MergeTotalByDay/mergeTotalByDay" method="post">
        <button style="VISIBILITY: hidden" id="auto" type="submit" class="btn-default" data-icon="search" >下一页</button>&nbsp;
    </form>
</div>